<template>
  <div class="backtop" @click="backtop">
      <img src="../../../assets/img/common/top.png"  alt="" >
  </div>
</template>

<script>
export default {
name:"BackTop",

data(){
    return{
    scrollTop:0//当前滑动距离
    }
},
mounted() {
    window.addEventListener("scroll",this.top,true);
},

methods: {
    backtop(){
        let timer=setInterval(()=>{
           let ispeed=Math.floor(-document.documentElement.scrollTop/5);
           document.documentElement.scrollTop=document.documentElement.scrollTop+ispeed;
           if(document.documentElement.scrollTop==0){
              clearInterval(timer)  
           }
        },16)
    },
    top(){     
        let backtop=document.querySelector(".backtop");
        let scrollTop= document.documentElement.scrollTop||document.body.scrollTop;
        if(scrollTop > 200){
            backtop.style.display="block";
        }else{
            backtop.style.display="none";
        }
    }
},
destroyed () {
    window.removeEventListener('scroll', this.top, true)
},
}
</script>

<style>
.backtop {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 5px;
    z-index: 99;
  }
  .backtop img {
    width: 43px;
    height: 43px;
  }
</style>